<template>
  <el-space direction="vertical" :size="20">
    <el-row :gutter="20">
      <el-col :lg="6" :sm="12" :xs="12"
        ><div class="grid-content"></div
      ></el-col>
      <el-col :lg="6" :sm="12" :xs="12"
        ><div class="grid-content"></div
      ></el-col>
      <el-col :lg="6" :sm="12" :xs="12"
        ><div class="grid-content"></div
      ></el-col>
      <el-col :lg="6" :sm="12" :xs="12"
        ><div class="grid-content"></div
      ></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :lg="12"><div class="grid-content2"></div></el-col>
      <el-col :lg="12"><div class="grid-content2"></div></el-col>
    </el-row>
  </el-space>
</template>

<style lang="less" scoped>
.grid-content {
  width: 100%;
  height: 193px;
  background-color: lightblue;
  margin: 10px 0;
}

.grid-content2 {
  width: 100%;
  height: 286px;
  background-color: lightcoral;
  margin: 10px 0;
}

.el-space {
  width: 100%;
}
:deep(.el-space__item) {
  width: 100%;
}
.el-row {
  width: 100%;
}
</style>
